<template>
	<div class="common bar_order">
		<div class="common-top clearfix">
			<!-- <div class="left flex flex-align-center" style="height:100%;">
				<span style="margin-left:20px;font-size:18px;">订单</span>
				<span @click="type$ement" style="font-size:14px;cursor:pointer;color: #618bfb;">出入库单<i style="font-size:14px;font-weight:600;margin-left:2px;" class="iconfont icon-exchange2jiaohuan"></i></span>
			</div> -->
			<div class="change-stock-btn">
				<span>出入库单</span>
				<span class="change-btn" @click.stop="type$ement">
					<i @click.stop=""></i>
				</span>
				<span>商品</span>
			</div>
		</div>
		<div class="content-box">
			<div class="content">
				<div class="titleTable">
					<table>
	                    <tr>
	                        <th style="width:9%">序号</th>
	                        <th style="width:13%">时间</th>
	                        <th style="width:13%">类型</th>
	                        <th style="width:13%">原因</th>
	                        <th style="width:10%">总金额</th>
	                        <th style="width:10%">总数量</th>
	                        <th style="width:13%">备注</th>
	                        <th style="width:10%">操作人员</th>
	                        <th style="width:9%">操作</th>
	                    </tr>
	                </table>
				</div>
                <div class="scrollBox">
                    <div class="scroll" :style="{'height':homeArr.length*10+'%'}">
                        <table class="conTable">
                            <tr v-for="(item,ind) in homeArr">
                                <td style="width:9%" v-text="ind+1+(currentPage-1)*pageSize"></td>
                                <td style="width:13%">{{item.addTime | numberToAllDate('')}}</td>
                                <td style="width:13%" v-text="stockType[item.type]"></td>
                                <td style="width:13%" v-text="sourceType[item.stockSource]"></td>
                                <td style="width:10%" v-text="item.amount"></td>
                                <td style="width:10%" v-text="item.quantity"></td>
                                <td style="width:13%" v-text="item.notes"  :title="item.notes"></td>
                                <td style="width:10%" v-text="item.operatorName"></td>
                                <td style="width:9%"><span style="color: #618bfb;font-size:16px;cursor:pointer;" @click="recordDetailFn(item)">详情</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
                 <div class="pagers">
				    <el-pagination
				      	@current-change="handleCurrentChange"
				      	:current-page.sync="currentPage"
				      	:page-size="pageSize"
				      	layout="total, prev, pager, next,jumper"
				      	:total="total">
				    </el-pagination>
                </div>
			</div>
		</div>

		<div class="dialog-box" v-if="dialogBtn" @click="dialogBtn=false">
			<div class="dialog position-middle-center" @click.stop="" style="width:720px;">
				<span class="close-btn" @click="dialogBtn=false"><i class="iconfont icon-close-b"></i></span>
				<div class="dialog-title">出入库详情<span style="font-size:14px; margin-left:10px;font-weight:500;" v-text="'备注:'+checkDetail.notes" :title="checkDetail.notes"></span></div>
				<div class="dialog-content" style="margin-top:20px;height:400px;">
					<div class="dialog-content-title">
						<table style="width:100%;">
							<tr>
								<th style="width:10%">序号</th>
		                        <th style="width:24%">商品名称(规格)</th>
		                        <th style="width:16%" v-if="checkDetail.type=='STOCK_OUT'">出库件数(件)</th>
		                        <th style="width:16%" v-if="checkDetail.type=='STOCK_IN'">入库件数(件)</th>
							</tr>
						</table>
					</div>
					<div class="dialog-scroll">
						<div class="scroll-inner">
							<table style="width:100%;text-align:center;">
								<tr v-for="(item,ind) in checkDetail.Arr">
	                                <td style="width:10%" v-text="ind+1"></td>
	                                <td style="width:24%" v-text="item.skuName"  :title="item.skuName"></td>
	                                <td style="width:16%" v-text="item.quantity"></td>
	                            </tr>
							</table>
						</div>
					</div>
				</div>
				<!-- <div class="dialog-footer clearfix">
					<div class="footer-btn sure right" @click="billBtn = true;" v-if="checkDetail.bill">查看单据</div>
					<div class="footer-btn cancle right"  v-else>未上传单据</div>
				</div> -->
			</div>
		</div>
		<div class="dialog-box" v-if="billBtn" @click="billBtn=false">
			<div class="dialog position-middle-center" @click.stop="" style="width:600px;">
				<span class="close-btn" @click="billBtn=false"><i class="iconfont icon-close-b"></i></span>
				<div class="dialog-title">票据<span style="font-size:14px; margin-left:10px;font-weight:500;"></span></div>
				<div class="dialog-content" style="margin-top:20px;height:400px;">
					<img :src="checkDetail.bill" alt="" style="width:100%;height:100%;" v-if="checkDetail.bill">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  	props:['storeId','config'],
  	data(){
		return {
			pickerOptionsForTimeRange:{
                   disabledDate(time) {
				//    let date = (new Date(time));
				// //    let dateStr = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
				// //    let newDate = new Date(dateStr).getTime();
				// //    let newDateForNextMonth = new Date(date.getFullYear(),(date.getMonth()+1),0).getTime();
				// //    return time.getTime() < newDate || time.getTime() > newDateForNextMonth;
				//     let curDate = (new Date()).getTime();
				//     let three = 30 * 24 * 3600 * 1000;
				//     let threeDays = curDate - three;
				//     return time.getTime() > Date.now() || time.getTime() < threeDays;
				} 
			},
			stockType:{
				STOCK_IN: "入库",
				STOCK_OUT: "出库"
			},
			sourceType:{
				CHECK_IN:'盘点入库',
				CHECK_OUT:'盘点出库',
				// REFUND_IN:'退单入库',
				REFUND_OUT:'退货出库',
				ALLOCATION_IN:'调拨入库',
				ALLOCATION_OUT:'调拨出库',
				PURCHASE_IN:'采购入库',
				// SALES_OUT:'销售出库',
				INNER_IN:'吧台到仓库',
				INNER_OUT:'仓库至吧台'
			},
			currentPage: 1,
	        pageSize:10,
	        total:0,
	        dialogBtn:false,
	        homeArr:[],//盘点列表
	        billBtn:false,
	        checkDetail:{
	        },//盘点详情列表
		}
	},
	watch:{
	},
	methods:{
		type$ement(){
			this.$emit('ement','_product');
		},
		//翻页
	    handleCurrentChange(val) {
	        console.log(`当前页: ${val}`);
	        this.getHomeData(val);
	    },
	    // 查看盘点详情
	    recordDetailFn(item){
	    	let obj = item;
	    	this.$http.get('/get-receiptDetail?invId='+item.id+'&storeId='+item.storeId).then((res)=>{
	    		this.dialogBtn = true;
	    		obj.Arr = res.data;
	    		this.checkDetail = obj;
	    	})
	    },
	    //获取首页数据
	    getHomeData(currentPage){
	    	// let query = '?page='+(currentPage?currentPage-1:0)+'&size='+this.pageSize+'&storeId='+this.storeId+'&type='+this.config;
	    	// this.homeArr = [];
	    	// this.$http.get('/record'+query).then((res)=>{
	    	// 	this.homeArr = res.data.content;
	    	// 	this.total = res.data.totalElements;
			// })
			this.$http({
				url:'get-receipt',
				method:'GET',
				params:{
					id:this.storeId,
					page:currentPage?currentPage-1:0
				}
			}).then(res=>{
				this.homeArr = res.data.content;
	    		this.total = res.data.totalElements;
			});
	    },
	   showBill(){

	   }
	},
	created () {
		this.getHomeData();
	},
	mounted() {
	},
	beforeDestroy() {
		
	}
}
</script>
<style lang="scss" scoped>
	@import '../../../../static/css/common.scss';
	@import "_order";
</style>